import React, { useState } from "react";
// import { useHistory } from "react-router";

import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";

import OtpInput from "react-otp-input";
import { useTranslation } from "react-i18next";
import { MyTimer } from "../../hooks/useTimer";

const VerifyOtp = () => {
  const { t } = useTranslation();
  const [otp, setOtp] = useState("");
  const [timerOff, setTimerOff] = useState(false);

  const expireTime = new Date();
  expireTime.setSeconds(expireTime.getSeconds() + 1200); // 20 minutes timer

  const backgroundImage = require("./../../assets/images/LoginPage/backgroundImage.jpg");
  const logo = require("./../../assets/images/LoginPage/logo.svg");

  // const history = useHistory();

  const handleChange = (userOtp: string) => {
    setOtp(userOtp);
    console.log(userOtp);
  };
  const handleSubmit = () => {
    console.log(otp);
  };
  return (
    <>
      <div className="app-wrapper min-vh-100 bg-white">
        <div className="app-inner-content-layout--main app-content p-0">
          <div className="bg-composed-wrapper--content flex-grow-1 w-100 d-flex align-items-center">
            <Grid container spacing={0} className="min-vh-100 ">
              <Grid item lg={5} xl={6} className="d-flex">
                <div className="background-gradient">
                  <img
                    src={backgroundImage}
                    alt="background"
                    className="background-image"
                  />
                  <div className="left-box-content">
                    <div className="greeting-box">
                      <img
                        src={logo}
                        alt="bitbine-logo"
                        className="logo-image"
                      />
                      <div className="greeting-text font-size-xxxl my-4">
                        {t("form:welcome-bitbine")}
                      </div>
                    </div>
                    <div className="left-box-bottom font-size-xxl mx-auto">
                      {t("form:form-desc")}
                    </div>
                  </div>
                </div>
              </Grid>
              <Grid
                item
                lg={7}
                xl={6}
                className="d-flex align-items-center singup-form"
              >
                <Grid
                  item
                  md={10}
                  lg={8}
                  xl={7}
                  className="mx-auto forget-box-container mt-4"
                >
                  <div className="py-4">
                    <div className="form-header text-center">
                      <div className="display-4 mb-1  form-title">
                        {t("form:forget-pass")}
                      </div>
                      <p className="font-size-lg  text-black-50 mt-2">
                        {t("form:forget-phone-desc")}
                      </p>
                    </div>

                    <form
                      onSubmit={() => handleSubmit()}
                      className="otp-box-container"
                    >
                      <OtpInput
                        containerStyle="otp-container"
                        inputStyle="otp-input"
                        value={otp}
                        numInputs={5}
                        onChange={(e: any) => handleChange(e)}
                        separator={<span className="mx-3"></span>}
                      />
                      <div className="otp-bottom">
                        <div className="resend-otp text-primary cursor-pointer ">
                          {t("form:resend-email")}
                        </div>
                        <div className="or-use-email text-primary cursor-pointer">
                          {t("form:or-use-email")}
                        </div>
                      </div>
                      <div className=" mt-4 text-black-60 timeout-otp">
                        {t("form:otp-desc")}
                      </div>
                      {!timerOff && (
                        <div className="mt-3">
                          <MyTimer
                            expiryTimestamp={expireTime}
                            onExpire={() => setTimerOff(true)}
                          />
                        </div>
                      )}
                      <div className="text-center submit-btn py-4">
                        <Button
                          className="btn-primary  p-3 "
                          type="submit"
                          style={{ width: "40%" }}
                          disabled={timerOff}
                        >
                          {t("buttons:submit-btn")}
                        </Button>
                      </div>
                    </form>
                  </div>
                  <div className="form-bottom">
                    <h6 className="terms">
                      <span className="mr-3">{t("form:terms")}</span>
                    </h6>
                    <h6 className="privacy ml-4">{t("form:privacy")}</h6>
                  </div>
                </Grid>
              </Grid>
            </Grid>
          </div>
        </div>
      </div>
    </>
  );
};
export default VerifyOtp;
